<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head lang="en" th:replace="include/common/common :: commonHeader">
    <footer th:include="include/common/common :: layUiResource"></footer>
    <footer th:include="include/common/common :: blueCSSResource"></footer>
    <footer th:include="include/common/common :: zTreeCSSSource"></footer>
    <footer th:include="include/common/common :: zTreeJSSource"></footer>

    <script>
        layui.config({
            base: '/staticResource/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index' , 'laytpl', 'table'] , function () {
            var layer = layui.layer
                ,element = layui.element
                ,admin = layui.admin
                ,table = layui.table
                ,upload = layui.upload
                ,$ = layui.jquery;

            element.render();

            upload.render({ //允许上传的文件后缀
                elem: '#goods-import'
                ,url: '/a/goods/excelImport'
                ,accept: 'file' //普通文件
                ,exts: 'xls|xlsx' //只允许上传压缩文件
                ,done: function(res){
                    let status = res.status;
                    if (status != 0){
                        layer.msg(res.msg + "请联系系统管理员！");
                    }else {
                        let type = 'saveMsg';
                        //当你在iframe页面关闭自身时
                        let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        $.fn.blueJs.tools.active[type].call(this , res.msg  , index);
                    }
                }
            });

            let entityName = 'clsItem'               //声明当前页面容器前缀
                // ,_iframe = entityName + "_form"      //声明嵌套的form容器ID
                //定义menuTree的设置
                ,treeSetting = {
                    // 回调定义
                    callback:{
                        beforeClick: zTreeBeforeClick ,
                        // 鼠标单击 回调
                        onClick:zTreeOnClick
                    }
                }
                ,_treeId = entityName + 'Tree' , _searchBtnId = entityName + 'SearchBtn'
                ,_searchInputId = entityName + 'SearchInput' , _treeDataUrl = "/a/" + entityName + "/treeData"
                //定义menuTree的参数
                ,userTreeOptions = {
                    treeId:_treeId
                    ,searchBtnId: _searchBtnId
                    ,searchInputId:_searchInputId
                    ,setting:treeSetting
                    ,isExpandAll:true
                    ,url:_treeDataUrl
                };

            //声明tree鼠标单击回调事件的动作，layui 弹层
            let active = {
                btn:function(jsonData){
                    $("#searchgoodsClsCode").val(jsonData.id);
                    let searchBtn = '#' + tableEntityName + 'SearchBtn';
                    $.fn.blueJs.tools.active['layTable'].call(this , table , searchBtn , pageSize , cols , tableId);
                }
            };

            //加载tree
            function loadTree(){
                // $("#" + _iframe).empty();
                $.fn.zTree.destroy(userTreeOptions.treeId);
                $.fn.blueJs.zTreeTool.loadTree(userTreeOptions);
            };

            /**
             * treeNode鼠标单击 回调
             * @param event
             * @param treeId
             * @param treeNode
             */
            function zTreeOnClick(event, treeId, treeNode) {
                active['btn'] && active['btn'].call(this , treeNode);
            };

            function zTreeBeforeClick(treeId, treeNode, clickFlag) {
                let flag = treeNode.isTreeLeaf || userTreeOptions.canSelectParent;
                // 非末级节点时，如果不允许选择，则展开/收起节点
                if (!flag){
                    let treeObj = $.fn.blueJs.zTreeTool.getTreeObj(userTreeOptions.treeId);
                    treeObj.expandNode(treeNode);
                }
                return flag;
            }

            let tableEntityName = 'goods'
                ,pageSize = [[${pageSize}]]
                ,tableId = tableEntityName + "-table-operate"
                ,cols = [
                [
                    {type:'checkbox', fixed: 'left'}
                    ,{field:'id', title: 'ID', sort: true, hide:true, fixed: 'left'}
                    ,{field:'code', sort:true , title: '商品代码'}
                    ,{field:'name', sort:true , title: '商品名称'}
                    ,{field:'barcode', sort:true , title: '条码'}
                    ,{field:'spec', sort:true , title: '单位'}
                    ,{field:'unit', sort:true , title: '包装单位'}
                    ,{field:'qpcStr', sort:true , title: '包装规格'}
                    ,{field:'clsCode', sort:false , title: '品类代码'}
                    ,{field:'clsName', sort:false , title: '品类名称'}
                    ,{field:'brandCode', sort:false , title: '品牌代码'}
                    ,{field:'brandName', sort:false , title: '品牌名称'}
                    ,{field:'oprice', sort:false , title: '进价'}
                    ,{title:'操作' , align:'center', width:200 , fixed: 'right', toolbar: '#goods-table-operate-barDemo'}
                ]
            ];

            $(document).ready(function(){
                loadTree();
                let searchBtn = '#' + tableEntityName + 'SearchBtn';
                $.fn.blueJs.tools.active['layTable'].call(this , table , searchBtn , pageSize , cols , tableId);
            });

            //点击事件监听
            $(document).on('click' , function (event) {
                let targetId = event.target.id;
                if (targetId == entityName +'Refresh'){
                    $.fn.blueJs.tools.refresh();
                }
                if (targetId == 'download'){
                    window.location.href = "/a/goods/fileDownload";
                }
                if (targetId == 'import'){
                    $.ajax({
                        type:'POST',
                        url:'/a/goods/excelImport',
                        dataType:'JSON',
                        cache:false,
                        processData: false,
                        contentType: false,
                        data:new FormData($('#importForm')[0]),
                        async:false,
                        success:function (result) {

                        },
                        error:function () {

                        }
                    });
                    return false;
                }
                if (targetId == entityName + 'Add'){
                    let i = "/a/" + entityName + "/form?isNewRecord=true" , t = "品类表单";
                    $.fn.blueJs.tools.active['layerOpen'].call(this , i , t);
                }
                if (targetId == _searchBtnId || targetId == _searchInputId){
                    fuzzSearch(_treeId,'#' + _searchInputId,null,true); //初始化模糊搜索方法
                }
                if (targetId == tableEntityName + 'SearchBtn'){
                    let searchBtn = '#' + targetId;
                    $.fn.blueJs.tools.active['layTable'].call(this , table , searchBtn , pageSize , cols , tableId);
                }
            });

            //监听工具条

            //todo:以下测试，未完成
            //监听表格复选框选择
            table.on('checkbox(goods-table-operate)', function(obj){
                console.log(obj)
            });

            table.on('tool(goods-table-operate)', function(obj){
                var data = obj.data;
                if(obj.event === 'detail'){
                    layer.alert('查看：<br>'+ JSON.stringify(data))
                    // layer.msg('ID：'+ data.id + ' 的查看操作');
                } else if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    let i = "/a/" + tableEntityName + "/form?id=" + data.id , t = "编辑商品";
                    $.fn.blueJs.tools.active['layerOpen'].call(this , i , t);
                }
            });

            var tableActive = {
                getCheckData: function(){ //获取选中数据
                    var checkStatus = table.checkStatus('goods-table-operate')
                        ,data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                }
                ,download: function(){ //导出
                    window.location.href = "/a/goods/fileDownload";
                }
                ,add: function(){
                    layui.router();
                    let i = "/a/" + tableEntityName + "/form?isNewRecord=true" , t = "新增商品";
                    $.fn.blueJs.tools.active['layerOpen'].call(this , i , t);
                }
            };

            $('.goods-table-operate-btn .layui-btn').on('click', function(){
                var type = $(this).data('type');
                tableActive[type] ? tableActive[type].call(this) : '';
            });

        });
    </script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!--        左侧tree-->
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">
                    此栏为测试信息，暂不好用
                </div>
                <div class="layui-card-body">
                    <div class="form-group treeSearchInput" id="search" style="display: block">
                        <!--                <label for="searchInput">关键字：</label>-->
                        <input type="text" id="clsItemSearchInput" maxlength="50" class="empty"/>
                        <button type="button" class="btn" id="clsItemSearchBtn" >搜索</button>

<!--                        <form method="post" id="importForm" enctype="multipart/form-data">
                            <input type="file" name="file"><br>
                            <button type="button" class="btn" onsubmit="return false" id="import" >导入</button>
                        </form>-->

                    </div>
                    <div id="clsItemTree" class="ztree"></div>
                </div>
            </div>
        </div>
        <!--        右侧表单-->
        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-header">商品明细表</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space10 layui-form-item">
                        <!--                        todo:id = entity + search + form-->
                        <form class="layui-form" id="goodsSearchForm" th:object="${goods}" method="post" action="/a/goods/findPage">
                            <input type="hidden" name="clsCode" id="searchgoodsClsCode" placeholder="品类代码" autocomplete="off" class="layui-input">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">品名：</label>
                                    <div class="layui-inline">
                                        <input type="text" name="name" id="searchgoodsName" placeholder="名称" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label">代码：</label>
                                    <div class="layui-inline">
                                        <input type="text" name="code" id="searchgoodsCode" placeholder="商品代码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label">条码：</label>
                                    <div class="layui-inline">
                                        <input type="text" name="barcode" id="searchgoodsBarcode" placeholder="商品条码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <!--                        todo:blue-form-id = entity + search + form-->
                                <button type="button" class="layui-btn" id="goodsSearchBtn" onsubmit="return false" blue-form-id="goodsSearchForm">搜索</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body" >
                    <div class="layui-btn-group goods-table-operate-btn" id="tableBtn" style="margin-bottom: 10px;">
                        <button class="layui-btn layui-btn-sm" data-type="add">新增</button>
                        <button class="layui-btn layui-btn-sm" data-type="getCheckData">获取选中行数据</button>
                        <button class="layui-btn layui-btn-sm" data-type="download" id="goods-download" >下载</button>
                        <button class="layui-btn layui-btn-sm" data-type="import" id="goods-import">导入</button>
                    </div>
                    <table class="layui-hide" id="goods-table-operate" lay-filter="goods-table-operate"></table>

                    <script type="text/html" id="goods-table-operate-barDemo">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
</html>